@charset "utf-8";
/* CSS Document */
/*--
   *Autor: Daniel Abel para +ZKreations
   *fecha de desarrollo: 15/08/2014
   *Under Creative Commons Attribution 3.0 License 
   *http://creativecommons.org/licenses/by/3.0/
--*/
div.sheet-slider {
   background-color:#444;
   overflow:hidden;
   width:100%;
   margin:0 auto;
   position:relative;
}

/*Animacion*/
div.sheet-slider, div.conten, div.sheet-slider div.tab .text h3 {
   transition: all 0.4s ease-in-out 0s;
   -moz-transition: all 0.4s ease-in-out 0s;
   -ms-transition: all 0.4s ease-in-out 0s;
   -o-transition: all 0.4s ease-in-out 0s;
   -webkit-transition: all 0.4s ease-in-out 0s;
}
.text{
   transition: all 0.5s ease-in-out 0.3s;
   -moz-transition: all 0.5s ease-in-out 0.3s;
   -webkit-transition: all 0.5s ease-in-out 0.3s;
   -o-transition: all 0.5s ease-in-out 0.3s;
   -ms-transition: all 0.5s ease-in-out 0.3s;
}
/**/
/*Reset css (slider)*/
div.sheet-slider input {display: none;}
div.sheet-slider div.tab img {width: 100%;}
div.sheet-slider div.tab {line-height:0;display:block;}
div.sheet-slider .sh-btns {font-size: 1px;letter-spacing: -1px;}
div.sheet-slider .sh-btns label {word-spacing: normal;white-space: normal;letter-spacing: normal;font-size: 2rem;}
div.sheet-slider div.text a {color: #0ab4d8;font-weight: bold;text-decoration: none;}
div.sheet-slider div.text a:hover {color: #29d3f7;text-decoration: none;}
div.text, .text h3, .text span {color:#fff;}
div.sheet-slider, .sh-btns label, div.tab img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /*no hay soporte para las siguientes
   propiedades pero igual las incluyo*/
  -o-user-select: none;
  user-select: none;
}
/**/

div.sheet-slider .sh-btns {
   bottom: 0;
   left: 0;
   position: absolute;
   text-align: center;
   width: 100%;
   z-index: 700;
}

div.sheet-slider .sh-btns label {
   background-color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   display: inline-block;
   height: 6px;
   margin-right: 1px;
   width: 85%;
}
div.sheet-slider .sh-btns label:hover {
   background-color: rgba(255, 255, 255, 0.8);
}

#sh-dos .sh-btns label {width: 42.4%;}
#sh-tres .sh-btns label {width: 28.28%;}
#sh-cuatro .sh-btns label {width: 21.2%;}
#sh-cinco .sh-btns label {width: 16.9%;}
#sh-seis .sh-btns label {width: 14.1%;}
#sh-siete .sh-btns label {width: 12.06%;}
#sh-ocho .sh-btns label {width: 10.55%;}
#sh-nueve .sh-btns label {width: 9.36%;}
#sh-diez .sh-btns label {width: 8.42%;}
#sh-once .sh-btns label {width: 7.64%;}
#sh-doce .sh-btns label {width: 7%;}

div.sheet-slider div.tab .text {
   font-size: 16px;
   font-family: helvetica,arial;
   left: 4%;
   line-height: 1.4;
   position: absolute;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
   top: 14%;
   opacity: 0;
}

div.sheet-slider div.tab .text h3 {font-size: 34px;margin: 0;}
div.sheet-slider div.conten {width:100%;position:relative;z-index: 600;}
div.sheet-slider div.conten div.tab {float: left;position: relative;width: 100%;}

#sh-dos div.conten {width:200%;}
#sh-tres div.conten {width:300%;}
#sh-cuatro div.conten {width:400%;}
#sh-cinco div.conten {width:500%;}
#sh-seis div.conten {width:600%;}
#sh-siete div.conten {width:700%;}
#sh-ocho div.conten {width:800%;}
#sh-nueve div.conten {width:900%;}
#sh-diez div.conten {width:1000%;}
#sh-once div.conten {width:1100%;}
#sh-doce div.conten {width:1200%;}

#sh-dos div.conten div.tab {width:50%;}
#sh-tres div.conten div.tab {width:33.333%;}
#sh-cuatro div.conten div.tab {width:25%;}
#sh-cinco div.conten div.tab {width:20%;}
#sh-seis div.conten div.tab {width:16.666%;}
#sh-siete div.conten div.tab {width:14.285%;}
#sh-ocho div.conten div.tab {width:12.5%;}
#sh-nueve div.conten div.tab {width:11.111%;}
#sh-diez div.conten div.tab {width:10%;}
#sh-once div.conten div.tab {width:9.090%;}
#sh-doce div.conten div.tab {width:8.333%;}

.slide:nth-child(1):checked ~ div.conten {margin-left:0;}
.slide:nth-child(2):checked ~ div.conten {margin-left:-100%;}
.slide:nth-child(3):checked ~ div.conten {margin-left:-200%;}
.slide:nth-child(4):checked ~ div.conten {margin-left:-300%;}
.slide:nth-child(5):checked ~ div.conten {margin-left:-400%;}
.slide:nth-child(6):checked ~ div.conten {margin-left:-500%;}
.slide:nth-child(7):checked ~ div.conten {margin-left:-600%;}
.slide:nth-child(8):checked ~ div.conten {margin-left:-700%;}
.slide:nth-child(9):checked ~ div.conten {margin-left:-800%;}
.slide:nth-child(10):checked ~ div.conten {margin-left:-900%;}
.slide:nth-child(11):checked ~ div.conten {margin-left:-1000%;}
.slide:nth-child(12):checked ~ div.conten {margin-left:-1100%;}


#s1:checked ~ div.conten div.tab:nth-child(1) .text, 
#s2:checked ~ div.conten div.tab:nth-child(2) .text, 
#s3:checked ~ div.conten div.tab:nth-child(3) .text, 
#s4:checked ~ div.conten div.tab:nth-child(4) .text, 
#s5:checked ~ div.conten div.tab:nth-child(5) .text, 
#s6:checked ~ div.conten div.tab:nth-child(6) .text, 
#s7:checked ~ div.conten div.tab:nth-child(7) .text, 
#s8:checked ~ div.conten div.tab:nth-child(8) .text, 
#s9:checked ~ div.conten div.tab:nth-child(9) .text, 
#s10:checked ~ div.conten div.tab:nth-child(10) .text, 
#s11:checked ~ div.conten div.tab:nth-child(11) .text, 
#s12:checked ~ div.conten div.tab:nth-child(12) .text{
   opacity:1;
   top: 8%;
}

#s1:checked ~ div.sh-btns label:nth-child(1), 
#s2:checked ~ div.sh-btns label:nth-child(2), 
#s3:checked ~ div.sh-btns label:nth-child(3), 
#s4:checked ~ div.sh-btns label:nth-child(4), 
#s5:checked ~ div.sh-btns label:nth-child(5), 
#s6:checked ~ div.sh-btns label:nth-child(6), 
#s7:checked ~ div.sh-btns label:nth-child(7), 
#s8:checked ~ div.sh-btns label:nth-child(8), 
#s9:checked ~ div.sh-btns label:nth-child(9), 
#s10:checked ~ div.sh-btns label:nth-child(10), 
#s11:checked ~ div.sh-btns label:nth-child(11), 
#s12:checked ~ div.sh-btns label:nth-child(12){
   background-color: #0ab4d8;
   box-shadow: 0 0 4px #1dc7eb;
}

@media only screen and (max-width: 400px) {
div.sheet-slider div.tab .text h3 {
   font-size: 20px;
   margin: 0;
}
}

/*Personalizar*/
div.sheet-slider {
   max-width: 1000px;
   max-height: 350px;
}
